<template>
    <div class="chart-des">{{customForm.description}}</div>
    <div :id="chartId" :style="{
          height: chartHeight + 'vh',
          width: chartWidth + 'vw'
        }"></div>
    <div class="chart-tips">本助手提供的数据仅供参考，不作为任何决策依据。</div>
</template>

<script setup>
    import * as echarts from 'echarts'
    import {defineProps, watch, nextTick} from 'vue'
    let props = defineProps({
        customForm: {
            type: Object,
        },
        chartId: {
            type: String,
        },
        chartHeight: {
            type: String,
            default: '32',
        },
        chartWidth: {
            type: String,
        },
        fullScreen: {
            type: Boolean,
            default: false,
        },
    });

    watch(() => props.customForm, () => {
        nextTick(() => {
            initChart()
        })
    },{immediate: true})


    watch(() => props.fullScreen, () => {
        nextTick(() => {
            initChart()
        })
    },{immediate: true})

    const initChart =() => {
        var chartId = echarts.init(document.getElementById(props.chartId))
        chartId.clear()
        let xData = props.customForm.xData
        let listMap = props.customForm.yData
        let yUnit = props.customForm.yUnit
        let title = props.customForm.title
        var option = {
            title: {
                text: title,
                left: 'center', // 标题水平居中
                textStyle: {
                    fontSize: 16, // 字体大小
                    fontWeight: 'bold' // 字体粗细
                },
            },
            tooltip: {
                trigger: 'axis',
                confine :true,
                enterable :true,//鼠标可以移入tooltip里
            },
            grid:{
                left:10,
                right:20,
                top:45,
                bottom:10,
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap : true,
                data: xData,
                axisTick: { show: false },
                axisLine: {
                    lineStyle: {
                        color: '#EDEDED'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#8A8A8A' // 将 x 轴刻度标签颜色设置为蓝色
                    }
                }
            },
            yAxis: {
                type: 'value',
                name: '单位：(' + yUnit + ')', // 为Y轴增加名称
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#EDEDED', // 修改分割线的颜色为红色
                        type: 'solid' // 线条类型，默认为实线
                    }
                },
                axisLabel: {
                    formatter: function(value,index){
                        return value;
                    }
                }
            },
            series: series_data(listMap)
        }
        chartId.hideLoading()
        chartId.setOption(option,true)
        setTimeout(() => {
            chartId.resize();
        }, 300)
    }

    const series_data =(listMap) => {
        var series = [];
        for(var name in listMap){  //根据后端传来的数据metricMap的长度循环创建serie里面的data[]，这里取的名字是item
            var item = {
                data:listMap[name],
                type: 'line',
                smooth: true,
                symbol:'circle',
                symbolSize: 0, // 标记的大小，这里统一设置为10
                lineStyle: {
                    color: '#165DFF', // 更改线条颜色为红色
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1, // 渐变方向，从左上到右下
                        [
                            {offset: 0, color: '#165DFF'}, // 0% 处的颜色
                            {offset: 1, color: '#f0f1ff'} // 100% 处的颜色
                        ],
                        false // 是否为径向渐变，这里为 false 表示线性渐变
                    ),
                    opacity: 0.3 // 设置透明度
                },
                label: {
                    show: true,
                    position: 'top',
                    valueAnimation: true, // 是否开启动画显示
                    formatter: '{c}' // 格式化标签文本，'{c}' 表示数值本身
                },
            }
            series.push(item)
        }
        return series
    }
</script>

<style scoped lang="less">
    .chart-des {
        font-size: 14px;
        margin: 3px 0 8px 0;
        color: #5A7597;
    }
    .chart-tips {
        font-size: 12px;
        margin-top: 2px;
        display: flex;
        justify-content: flex-start;
        color: #8F8F8F;
    }
</style>